<template>
    <div class="bxnumber">
        <mu-paper class="textWrapper" :zDepth="2">
            <div>
                <div class="text">
                    <mu-text-field label="请输入您的包厢号" labelFloat v-model="bxid"/><br/>
                </div>
                <div class="btn">
                    <mu-raised-button label="确定" class="demo-raised-button" @click="tomenu" secondary/>
                </div>
            </div>
        </mu-paper>
        <mu-paper class="textWrapper" :zDepth="2">
            <div>
                <div class="text">
                    <mu-text-field label="请输入您的包厢号" labelFloat v-model="bxid"/><br/>
                </div>
                <div class="btn">
                    <mu-raised-button label="确定" class="demo-raised-button" @click="tomenu" secondary/>
                </div>
            </div>
        </mu-paper>
        <mu-paper class="textWrapper" :zDepth="2">
            <div>
                <div class="text">
                    <mu-text-field label="请输入您的包厢号" labelFloat v-model="bxid"/><br/>
                </div>
                <div class="btn">
                    <mu-raised-button label="确定" class="demo-raised-button" @click="tomenu" secondary/>
                </div>
            </div>
        </mu-paper>
        <mu-dialog :open="dialog" title="提示">
            请输入包厢号！
            <mu-flat-button label="确定" slot="actions" primary @click="close"/>
        </mu-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data: function () {
      return {
        dialog: false
      }
    },
    methods: {
      tomenu () {
        if (!this.bxid) {
          this.open()
          return
        }
        this.$router.push('goods')
      },
      open () {
        this.dialog = true
      },
      close () {
        this.dialog = false
      }
    },
    computed: {
      bxid: {
        get () {
          return this.$store.state.bxid
        },
        set (value) {
          this.$store.dispatch('setBxId', value)
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/components/bxnumber.styl"
    .textWrapper
        margin 20px 10px
        padding 10px
        .text
            text-align center
        .btn
            text-align center
</style>
